<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			table {
				border-collapse: collapse;
				width: 100%;
			}

			th,
			td {
				border: 1px solid #ddd;
				padding: 8px;
				text-align: left;
			}

			th {
				background-color: #f2f2f2;
			}

			tr:hover {
				background-color: #f5f5f5;
			}

			.details {
				display: none;
			}
		</style>
	</head>
	<body>

		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
				<tr data-details="Details for John Doe">
					<td>John Doe</td>
					<td>
						<button>Edit</button>
						<button>Delete</button>
					</td>
				</tr>
				<tr data-details="Details for Jane Doe">
					<td>Jane Doe</td>
					<td>
						<button>Edit</button>
						<button>Delete</button>
					</td>
				</tr>
				<!-- Add more rows as needed -->
			</tbody>
		</table>

		<div id="details-container" class="details">
			<p id="details-content"></p>
		</div>

		<script>
			const detailsContainer = document.getElementById('details-container');
			const detailsContent = document.getElementById('details-content');
			const rows = document.querySelectorAll('tbody tr');

			rows.forEach(row => {
				row.addEventListener('mouseover', () => {
					const details = row.getAttribute('data-details');
					detailsContent.textContent = details;
					detailsContainer.style.display = 'block';
				});

				row.addEventListener('mouseout', () => {
					detailsContainer.style.display = 'none';
				});
			});
		</script>

	</body>
</html>